<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="户号查询"></CustomNav>
		<image src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/banner.png"
			class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<view class="name FZHZGBJ">户号查询</view>
			<view class="form-item">
				<view class="unit">缴费单位</view>
				<view class="form-info">
					<picker @change="bindPickerChange" :value="unitIndex" :range="unitList" class="form-crl"
						range-key="companyName">
						<view>{{unitIndex==-1? '请选择缴费单位':unitList[unitIndex].companyName}}</view>
					</picker>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="unit">缴费户号</view>
				<view class="form-info">
					<input placeholder="1-16位编号，请查看账单/短信" v-model="form.number" class="form-crl" type="number"
						maxlength="16" />
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="btn-item">
				<view class="btn normal" @click="payment">查询并缴费</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		getCompanyListApi
	} from '@/api/payment.js'
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form: {
					companyName: '',
					number: ''
				},
				rules: {
					companyName: {
						name: '缴费单位',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择缴费单位')
							}
							callback();
						}
					},
					number: {
						name: '缴费户号',
						required: true
					}
				},
				unitList: [],
				unitIndex: -1
			}
		},
		watch: {

		},
		methods: {
			bindPickerChange(e) {
				this.unitIndex = e.detail.value;
				this.form.companyName = this.unitList[this.unitIndex].companyName
			},
			getList() {
				getCompanyListApi().then((res) => {
					this.unitList = res
				});
			},
			payment() {
				if (validate(this.form, this.rules)) {
					// setTimeout(() => {
					// 	uni.$emit('queryDetail', this.form)
					// }, 500)
					this.navigate('/page_pack/payment/payment?account=' + this.form.number + '&companyName=' + this.form
						.companyName)
				}
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #F4F8FF;

		.bg-img {
			width: 100%;
			height: 100%;
		}

		.info-block {
			width: calc(100% - 60rpx);
			margin: 30rpx auto;
			background: #FFFFFF;
			margin-top: -90rpx;
			border-radius: 20rpx;
			padding: 30rpx;

			.name {
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #F7F7F7;
				padding-bottom: 30rpx;
				margin-top: 20rpx;

				.unit {
					font-size: 30rpx;
					margin-bottom: 30rpx;
				}

				.form-info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.form-crl {
						width: calc(100% - 50rpx);
						color: #767676;
						font-size: 30rpx;
					}

					.iconfont {
						color: #767676;
						font-size: 34rpx;
					}
				}
			}

			.btn-item {
				display: flex;
				justify-content: center;
				margin-top: 40rpx;
			}
		}
	}
</style>